<template>
  <div class="list">
    <el-container v-for="item in list" v-bind:key="item.id">
      <el-container >
        <el-aside width="200px">
          <div class="listRow" v-on:click="gotoContent(item.id)"><img :src="item.cover" width="200px"></div>
        </el-aside>
        <el-main >
          <div class="listRow" v-on:click="gotoContent(item.id)"><strong>{{item.title}}</strong>
            <br>
            <br>
            <div>发布时间：{{fDate(item.publishTime)}}</div>
            <div>阅读量：{{item.readTimes}}</div>
            <div>点赞数：{{item.thumpUp}}
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {get} from '../utils/request';
import {fmtDate} from '../filters/index';

export default {
  data(){
    return {
      list:[],
      name:this.$route.query.name,
      content:''
    }
  },
  methods:{
    // 根据点击的页面名称，加载对应的内容
    categoryById(){
      get('/index/article/findCategoryArticles').then(resp=>{
        for(let item of resp.data){
          if (item.category.name == this.$route.query.name) {
            this.list = item.aritcle;
          }
        }
        // console.log(this.list);
      })
    },
    // 点击跳转到内容页面
    gotoContent(id){
      this.$router.push({path:'/list/listContent',query:{name:this.name,ArticleId:id}});
    },
    fDate(time){
      return fmtDate(time);
    }
  },
  //  局部处理方式    解决跳转页面，参数改变，跳转页面数据不刷新的问题
  watch: {
      '$route' (to, from) { //监听路由是否变化
        if(to.query.name != from.query.name){
          this.name = to.query.name;
          this.categoryById(); //重新加载数据
        }
      }
  },
  created(){
    this.categoryById();
  }
}
</script>

<style lang="scss" scoped>
  .list{
    width: 80%;
    margin: 0 auto;
    .listRow{
      cursor:pointer;
    }
    .el-container:hover{
      background-color: #f4f4f4;
    }
  }
</style>